<template>
  <div class="container" v-if="isShow">
    <img class="icon" :src="iconImg"/>
    <div class="title">{{title}}</div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
name: 'loading',
data () {
  return {
    isShow: false,
    loadingImg: '',
    successImg: '',
    iconImg: '',
    title: '加载中...',
    duration: 1500,
    timer: null
  }
},
methods: {
  showLoading (obj) {
    let that = this
    that.iconImg = that.loadingImg
    that.isShow = true
    if (obj) {
      that.title = obj.title
    }
    that.duration = -1
  },
  hideLoading () {
    let that = this
    this.isShow = false
    if (that.timer) {
      clearInterval(that.timer)
      that.timer = null
    }
  },
  showToast (obj) {
    let that = this
    that.isShow = true
    if (obj) {
      that.title = obj.title || that.title
      if (obj.icon === '') {
        that.iconImg = that.loadingImg
      } else if (obj.icon === 'success') {
        that.iconImg = that.successImg
      } else if (obj.icon === 'none') {
        that.iconImg = ''
      }
      that.duration = obj.duration || that.duration
    }
    that.delayHide()
  },
  hideToast () {
    this.isShow = false
  },
  delayHide () {
    let that = this
    if (that.duration >= 0) {
      that.timer = window.setInterval(that.hideLoading, that.duration)
    }
  }
}
}
</script>

<style scoped>
.container{
  /*width: 120px;*/
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.icon {
  width: 40px;
  opacity: 0.9;
}
.title {
  padding-top: 10px;
  font-size: 14px;
  margin: 0 10px;
  min-width: 80px;
  text-align: center;
}
</style>
